<template>
    <div>
        <div class="selectValue">
            <label class="value">
                <span class="img">
                    <img src="@/assets/images/airIndex/sbxx.png" />
                </span>
                <span class="title">设备信息</span>
            </label>
        </div>
        <div id="chart-container" style="padding: 0 10px 10px 10px; margin: 0 auto" class="hiddenScroll">
            <el-table
                :height="getHeight1() + 'px'"
                :data="tableData3"
                style="width: 100%"
                row-key="id"
                :expand-row-keys="expandRowKeys"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
                <el-table-column prop="node_name" label="设备类型" fixed> </el-table-column>
                <el-table-column prop="total_count" label="总数" show-overflow-tooltip width="50"> </el-table-column>
                <el-table-column prop="online_count" label="在线数" show-overflow-tooltip width="58"> </el-table-column>
                <el-table-column prop="offline_count" label="离线数" show-overflow-tooltip width="58"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
export default {
    props: ['currentNodeId', 'currentNodeName'],
    mounted() {},
    watch: {
        currentNodeId: {
            handler(newV) {
                if (newV && newV != '1') {
                    this.getData()
                }
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            expandRowKeys: [],
            tableData3: []
        }
    },
    methods: {
        /**
         * 递归筛选层级 ≤ maxLevel 的节点key
         * @param {Array} data - 树形数据源
         * @param {Number} maxLevel - 最大展开层级
         * @param {Number} currentLevel - 当前层级（默认1，根节点层级）
         * @returns {Array} 需展开的节点key数组
         */
        getExpandKeys(data, maxLevel, currentLevel = 1) {
            let keys = []
            data.forEach((item) => {
                // 若当前层级 ≤ 最大层级，加入展开列表
                if (currentLevel <= maxLevel) {
                    keys.push(item.id) // 注意：key必须是节点的唯一标识（如id）
                }
                // 递归处理子节点（层级+1）
                if (item.children && item.children.length > 0) {
                    keys = [...keys, ...this.getExpandKeys(item.children, maxLevel, currentLevel + 1)]
                }
            })
            return keys
        },
        getData() {
            const currentNodeId = this.currentNodeId
            const self = this
            AjaxCommon(`/api/Eq/GetDivceInfo?build_id=${currentNodeId}&eq_type=01,02,03`, 'get', null).then((res) => {
                if (res?.data?.Code == 200) {
                    const data = res?.data.Message
                    const newData =
                        data?.map((t, i) => {
                            if (typeof t.parent_type == 'undefined') {
                                t.parent_type = null
                            }
                            t.id = 'test_' + i
                            return t
                        }) ?? []

                    const finishData = Utility.arrayCascade(newData, (c, p) => c.parent_type == p.eq_type, 'children')
                    // 初始化时计算需要默认展开的节点（前两级）
                    this.expandRowKeys = this.getExpandKeys(finishData, 1)
                    self.tableData3 = finishData
                } else {
                    PopupCommon.notify('error', res?.data?.msg)
                }
            })
        },
        getHeight1() {
            if (document.body.clientWidth > 1910) {
                return document.body.clientHeight - 570
            } else if (document.body.clientWidth > 1400) {
                return 280
            }
        }
    }
}
</script>

<style scoped lang="scss">
.rightTitle {
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    margin-top: 20px;
    span {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    label {
        text-align: right;
        float: right;
        color: #3b8cfc;
        margin-right: 15px;
        cursor: pointer;
        font-size: 16px;
    }
    .printer {
        color: #3b8cfc;
    }
    .download {
        color: #3b8cfc;
    }
}
@media screen and (max-width: 1400px) {
    .selectValue {
        margin-top: 0 !important;
    }
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f5f5f5;
    margin: 10px;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    margin-left: 20px;
    font-size: 16px;

    .img {
        display: block;
        float: left;
        margin-top: 4px;
    }
    .title {
        // color: #4e66ed;
        margin-left: 10px;
    }
}
.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
    .btnList {
        .hover {
            border-color: #2680fa !important;
        }
        .btnItem {
            display: inline-block;
            height: 26px;
            width: 60px;
            margin-top: 7px;
            margin-left: 10px;
            line-height: 23px;
            text-align: left;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                border-color: #2680fa;
            }
            &:first-child {
                margin-left: 0 !important;
            }
            svg {
                margin-top: 2px;
                float: left;
                margin-left: 8px;
                margin-right: 3px;
            }
            label {
                font-size: 14px;
            }
        }
    }
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
</style>
